<template>
    <div>
        <Change_header :title="title" />
        <div class="chatContainer">
            <div class="other_msg clearfix">
                <div class="other_icon">
                    <img src="../../images/mainTwo/chitchat/01.png" />
                </div>
                <div class="other_content">
                    <p class="other_content_text">在的吗</p>
                </div>
            </div>
            <div class="my_msg" v-for="item in my_topic_arr">
                <div class="my_icon">
                    <img src="../../images/mainTwo/chitchat/02.png" />
                </div>
                <div class="my_content">
                    {{item}}
                </div>
            </div>
        </div>
        <div class="sendContainer">
            <p class="send">
                <span>
                    <img src="../../images/mainTwo/chitchat/03.png"/>
                </span>
                <span>
                    <img src="../../images/mainTwo/chitchat/04.png"/>
                </span>
                <input v-model="content">
                <button v-on:click="send">发送</button>
            </p>
        </div>
    </div>
</template>
<script>
import Change_header from "../../components/changeHeader"
var canvas = document.getElementById("canvas")
export default {
    name: "onlineChat",
    components: { Change_header },
    data(){
        return{
            content:"啦啦",
            my_topic_arr:["在的啊"]
        }
    },
    props:{
        title:{
            default:"小小"
        }
    },
    methods:{
        send:function(){
            this.$data.my_topic_arr.push(this.$data.content)
        }
    }
}
</script>
<style lang="less" scoped>
.chatContainer {
    padding: 200/75rem 40/75rem 0 40/75rem;
    font-size: 24px;
    .other_msg {
        margin: 10/75rem 0;
        .other_icon {
            img {
                display: inline-block;
                width: 80/75rem;
                height: 80/75rem;
                float: left;
            }
        }
        .other_content {
            float: left;
            text-align: left;
            margin-left: 10/75rem;
            max-width: 300/75rem;
            white-space: break;
            word-break: break-all; // border: 1px solid #ff406f;
            background: url("../../images/mainTwo/chitchat/chatBorder.png") no-repeat;
            background-position: 0px;
            background-size: 100% 100%; // transform: rotate(180deg);
            // transform: rotate3d(0,0,1,180deg);
            transform: rotate3d(0, 1, 0, 180deg);
            .other_content_text {
                padding: 10/75rem 20/75rem 10/75rem 50/75rem;
                transform: rotate3d(0, 1, 0, 180deg);
            }
        }
    }
    .my_msg {
        margin: 10/75rem 0;
        float: right;
        width: 100%;
        .my_icon {
            float: right;
            img {
                display: inline-block;
                width: 80/75rem;
                height: 80/75rem;
            }
        }
        .my_content {
            float: right;
            text-align: left;
            margin-right: 20/75rem;
            max-width: 300/75rem;
            white-space: break;
            word-break: break-all; // border: 1px solid #ff406f;
            background: url("../../images/mainTwo/chitchat/chatBorder.png") no-repeat;
            background-position: 5px;
            background-size: 100% 100%;
            padding: 10/75rem 50/75rem 10/75rem 20/75rem;
        }
    }
}

.sendContainer {
    position: fixed;
    bottom: 0;
    width: 100%; // height: 70/75rem;
    // box-shadow: 0 5px 15px #ccc;
}

.send {
    box-shadow: 0 1px 20px #ccc;
    width: 100%;
    padding-bottom: 30/75rem;
    line-height: 70/75rem;
    input {
        width: 5rem;
        height: 45/75rem;
        border: 1px solid #808080;
        border-radius: 5px;
        margin-top: -10/75rem;
        text-indent: 15/75rem;
        font-size: 26/75rem;
    }
    span{
        display: inline-block;
        height: 30/75rem;
        padding: 0 10/75rem;
        img{
            display: inline-block;
            width: 30/75rem;
            height: 30/75rem;
            vertical-align: bottom;
        }
    }
    span:first-child{
        // border-right: 2px solid #808080;
        margin-left: 50/75rem;
    }
    button {
        width: 90px;
        height: 45px;
        outline: none;
        border-radius: 15px;
        border: 1px solid #808080;
        background: rgba(0, 0, 0, 0)
    }
}
</style>
